<template>
    <div class="toast-container">
        <div
            v-for="toast in toasts"
            :key="toast.id"
            class="toast align-items-center text-white"
            :class="[typeMap[toast.type]?.color || 'bg-dark', 'show']"
            role="alert"
        >
            <div class="d-flex">
                <div class="toast-body d-flex align-items-center">
                    <i :class="['bi me-2', typeMap[toast.type]?.icon]"></i>
                    {{ toast.message }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" @click="remove(toast.id)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const toasts = ref([]);

const typeMap = {
    success: { icon: 'bi-check-circle-fill', color: 'bg-success' },
    error: { icon: 'bi-x-circle-fill', color: 'bg-danger' },
    info: { icon: 'bi-info-circle-fill', color: 'bg-primary' },
    warning: { icon: 'bi-exclamation-triangle-fill', color: 'bg-warning' }
};

const addToast = (type, message, duration = 3000) => {
    const id = Date.now() + Math.random();
    toasts.value.push({ id, type, message });
    if (toasts.value.length > 3) toasts.value.shift();
    if (duration) {
        setTimeout(() => remove(id), duration);
    }
};

const remove = id => {
    toasts.value = toasts.value.filter(t => t.id !== id);
};

defineExpose({ addToast });
</script>

<style scoped>
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    pointer-events: all;
}
</style>
